<template>
  <div>
    <div class="contentTop">
      <div class="contentImg"><img :src="img01" alt=""></div>
      <div class="title"><img :src="title01" alt=""></div>
      <div class="weakTitle">畅听百本好书精华，共同成长不负时光</div>
      <div class="listen">
        <div>
          <div class="book" v-if="playing1"><img :src="stop" alt="" @click="stopAll"></div>
          <div class="book" v-else><img :src="play" alt="" @click="playMusic(1)"></div>
          <div class="bookname">
            <div class="playing" v-if="playing1"><img :src="playing" alt=""></div>
            <audio ref="live" style="width: 1px;height: 0;" src="https://yiban-c.ivykid.com/yb-info-prd/course_audio/201906118dbfd9b7c54d46d882f771c01912e120.mp3"></audio>
            <div class="name">活法</div>
          </div>
        </div>
        <div>
          <div class="book" v-if="playing2"><img :src="stop" alt="" @click="stopAll"></div>
          <div class="book" v-else><img :src="play" alt="" @click="playMusic(2)"></div>
          <div class="bookname">
            <div class="playing" v-if="playing2"><img :src="playing" alt=""></div>
            <audio ref="sudongpo" style="width: 1px;height: 0;" src="https://yiban-c.ivykid.com/yb-info-prd/course_audio/201906113e51e91fecbd49268beba589da9c76de.mp3"></audio>
            <div class="name">苏东坡 传</div>
          </div>
        </div>
        <div>
          <div class="book" v-if="playing3"><img :src="stop" alt="" @click="stopAll"></div>
          <div class="book" v-else><img :src="play" alt="" @click="playMusic(3)"></div>
          <div class="bookname">
            <div class="playing" v-if="playing3"><img :src="playing" alt=""></div>
            <audio ref="poorChali" style="width: 1px;height: 0;" src="https://yiban-c.ivykid.com/yb-info-prd/course_audio/20190611a14885c90fa54851babe4aa7bb37496e.mp3"></audio>
            <div class="name">穷查理宝典</div>
          </div>
        </div>
      </div>
    </div>
    <div class="title1">畅听高分好书精华<br>每年更新超100本</div>
    <div class="readLine"></div>
    <div class="threePoint">
      自我提升，职场技能<br>心灵沟通，家庭关系<br>名人传记，经典巨著<br>心理学，经济学，人文历史<br>......
    </div>
    <div class="contentImg" style="margin: .14rem .16rem .5rem .16rem;"><img :src="img02" alt=""></div>
    <div class="title1" style="margin-top: .5rem;">汇聚各领域达人<br>与你共读经典</div>
    <div class="readLine"></div>
    <div class="threePoint">
      生活感悟，人生态度<br>理论知识，实操技能<br>迭代新认知，创新方法论<br>让你收获满满，遇到更好的自己
    </div>
    <div class="contentImg" style="margin: .24rem .16rem .5rem .16rem;"><img :src="img03" alt=""></div>
    <div class="title1">100+知识彩蛋<br>助你变身知识达人</div>
    <div class="readLine"></div>
    <div class="threePoint">
      每年更新超过100个实用知识彩蛋，<br>砸彩蛋赢奖励，让你变身知识达人，<br>轻松成长，成为赚钱高手
    </div>
    <div class="contentImg" style="margin: .24rem .16rem .7rem .16rem;"><img :src="img04" alt=""></div>
    <div class="studyTogether">
      <div class="title" style="padding-top: .4rem;"><img :src="title02" alt=""></div>
      <div class="weakTitle">读书赚学分做公益，一起变身公益达人</div>
      <div class="contentImg" style="margin: .24rem .16rem .7rem .16rem;"><img :src="img05" alt=""></div>
    </div>
    <div class="title1">学分做公益<br>为贫困山区儿童的心愿助力</div>
    <div class="readLine"></div>
    <div class="threePoint" style="padding: 0 .16rem;text-align: left;line-height:28px;">
      开通会员后，会员可通过完成每日任务获得学分，获得的学分可用于「公益伴学」，为贫困山区儿童的心愿助力！<br><br>
      参与公益伴学还可以赚取爱心值，爱心值越高，越有机会赢取「益伴探索之旅」。<br><br>
      「益伴探索之旅」将分为多期：（包括但不限于）与益伴团队成员外出旅游，与商业精英出国进行考察，与明星一起支教……
    </div>
    <div class="title" style="margin-top: 1rem"><img :src="title03" alt=""></div>
    <div class="weakTitle">每日听书写笔记，日积月累丰富你的知识体系</div>
    <div class="tab">
      <swiper :options="swiperOption" ref="mySwiper" class="swiper">
        <swiper-slide v-for="(item,index) in banners" :key="index" class="swiper_item">
            <img :src="item" alt="轮播图" class="pic"/>
        </swiper-slide>
        <div class="swiper-pagination"  slot="pagination"></div>      
      </swiper>
    </div>
    <div class="bookFriend">
      <div class="title" style="color: #fff;padding-top: .26rem;"><img :src="title04" alt=""></div>
      <div class="weakTitle" style="color: #fff;margin-bottom: .34rem;">加入益伴每日读书，和万千书友一起交流成长</div>
      <div class="discuss">
        <div class="top">
          <div class="headimg"><img :src="head02" alt=""></div>
          <div class="nickname">书友4528</div>
        </div>
        <div class="content">
          我是真正的受益者，对家庭关系、对亲子教育、和工作事业都有很大的收获，尤其是解读《自卑与超越》、《非暴力沟通》等书籍，深入浅出，简明扼要。
        </div>
      </div>
      <div class="discuss">
        <div class="top">
          <div class="headimg"><img :src="head03" alt=""></div>
          <div class="nickname">香闲书墨</div>
        </div>
        <div class="content">
          被吸引了，内容好，主持人的声音也好听。虽然已经进入了老年生活，但是通过读书弥补中青年时期由于条件和环境不允许对许多知识的缺失，真是一件幸事。
        </div>
      </div>
      <div class="discuss">
        <div class="top">
          <div class="headimg"><img :src="head01" alt=""></div>
          <div class="nickname">睿梦珂</div>
        </div>
        <div class="content">
          益伴教会了我如何和孩子相处，如何理解孩子的感受，通过同理心倾听和无条件的爱、认同和感受孩子的情绪。是因为益伴才改变了我和孩子的关系，感谢益伴！
        </div>
      </div>
    </div>
    <div class="twoCode"><img :src="twoCode" alt=""></div>
  </div>
</template>

<script>
    export default {
      name: "MobileContent",
      data() {
        return {
          title01: require('../../../assets/img/title01.png'),
          title02: require('../../../assets/img/title02.png'),
          title03: require('../../../assets/img/title03.png'),
          title04: require('../../../assets/img/title04.png'),
          img01: require('../../../assets/img/img01.png'),
          img02: require('../../../assets/img/img02.png'),
          img03: require('../../../assets/img/img03.png'),
          img04: require('../../../assets/img/img04.png'),
          img05: require('../../../assets/img/img05.png'),
          img06: require('../../../assets/img/img06-1.png'),
          play: require('../../../assets/img/play.png'),
          stop: require('../../../assets/img/stop.png'),
          playing: require('../../../assets/img/playing.png'),
          head01: require('../../../assets/img/head01.jpeg'),
          head02: require('../../../assets/img/head02.jpeg'),
          head03: require('../../../assets/img/head03.jpeg'),
          twoCode: require('../../../assets/img/twocode.png'),
          playing1: false,
          playing2: false,
          playing3: false,
          swiperOption: {
            loop : true,
            autoplay:true,
            pagination: {  //分页器
              el: '.swiper-pagination',
            },
          },
          banners:[require('../../../assets/img/img06-1.png'),require('../../../assets/img/img06-2.png'), require('../../../assets/img/img06-3.png')]
        }
      },
      computed: {
        swiper() {
          return this.$refs.mySwiper.swiper
        }
      },
      mounted() {
        this.initShare()
      },
      methods: {
        initShare() {
        },
        playMusic(num) {
          this.stopAll()
          if(num === 1) {
            this.$refs.live.play()
            this.playing1 = true
          }
          if(num === 2) {
            this.$refs.sudongpo.play()
            this.playing2 = true
          }
          if(num === 3) {
            this.$refs.poorChali.play()
            this.playing3 = true
          }
        },
        stopAll() {
          this.$refs.live.pause()
          this.$refs.sudongpo.pause()
          this.$refs.poorChali.pause()
          this.playing1 = false
          this.playing2 = false
          this.playing3 = false
        }
      }
    }
</script>

<style lang="less">
  /*修改swipe样式*/
  .swiper-pagination-bullet-active{
    width: .2rem;
    border-radius: 20px;
    background: #000;
    opacity: .2;
  }
  .swiper-container{
    padding-bottom: .3rem;
  }
  img{
    width: 100%;
  }
  .swiper{
    width: 100%;
    min-height: 1px;
  }
  .contentTop{
    background: #f8f8f8;
    height: 9.46rem;
    margin-top: .68rem;
  }
  .title{
    color: #151515;
    img{
      width: 1.38rem;
    }
  }
  .weakTitle{
    font-size: .16rem;
    color: #888;
    margin-top: .12rem;
  }
  .listen{
    margin-top: .32rem;
    display: flex;
    justify-content: space-between;
    padding: 0 .36rem;
  }
  .listen>div{
    width: .82rem;
  }
  .playing{
    width: .16rem;
    height: .16rem;
    font-size: 0;
  }
  .bookname{
    display: flex;
    align-items: center;
    margin-top: .08rem;
    .name{
      font-size: .12rem;
    }
  }
  .title1{
    color: #151515;
    font-size: .24rem;
    margin-top: .92rem;
  }
  .book{
    width: .76rem;
    height: 1rem;
    background: url("../../../assets/img/book01.png") no-repeat;
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    img{
      width: .44rem;
      height: .44rem;
    }
  }
  .listen>div:nth-child(2) .book {
    background: url("../../../assets/img/book02.png") no-repeat;
    background-size: cover;
  }
  .listen>div:nth-child(3) .book {
    background: url("../../../assets/img/book03.png") no-repeat;
    background-size: cover;
  }
  .readLine{
    width: 1.3rem;
    height: .02rem;
    background: #E14638;
    margin: .21rem auto .16rem auto;
  }
  .threePoint{
    font-size: .2rem;
    color: #9c9c9c;
  }
  .studyTogether{
    overflow: hidden;
    height: 7.2rem;
    background: #f8f8f8;
  }
  .tab{
    margin: .15rem .06rem .07rem .06rem;
  }
  .bookFriend{
    margin-top: .85rem;
    padding: .16rem;
    background: #FE7067;
  }
  .discuss{
    background:#fff;
    box-shadow:0px 0px 10px 0px rgba(0,0,0,0.1);
    border-radius:14px;
    text-align: left;
    padding: .16rem .16rem .07rem .16rem;
    margin-top: .2rem;
    .top{
      display: flex;
      align-items: center;
      margin-bottom: .17rem;
      .headimg{
        width: .3rem;
        margin-right: .1rem;
        img{
          border-radius: 50px;
        }
      }
      .nickname{
        color: #151515;
        font-size: .18rem;
      }
    }
  }
  .twoCode{
    padding: .22rem .14rem;
  }
</style>
